<!DOCTYPE html>
<html lang="en">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2345网咖</title>
    <style>
        body {
            background-image: url('https://img.zcool.cn/community/0116bb5d4bcb2ca80120695cdaa257.jpg@1280w_1l_2o_100sh.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #646262;
            max-width: 300px;
            background: rgba(178, 182, 178, 0.8);
        }

        input, button {
            margin-top: 10px;
            width: 100%;
            padding: 5px;
        }

        .login-button-container {
            margin-top: 20px;
        }

        .error-message {
            color: red;
            margin-top: 5px;
        }

        #eyeIcon {
            float: right;
            cursor: pointer;
            position: relative;
            top: -25px;
            right: 5px;
        }

        #eyeIcon input[type="checkbox"] {
            display: none;
        }

        #eyeIcon .eye {
            font-size: 20px;
            position: absolute;
            top: 10px;
        }

        #eyeIcon .closed-eye {
            display: none;
        }

        #eyeIcon input[type="checkbox"]:checked ~ .open-eye {
            display: none;
        }

        #eyeIcon input[type="checkbox"]:checked ~ .closed-eye {
            display: block;
        }

        .loading {
            display: none;
            margin-top: 10px;
        }
    </style>
</head>

<body>

<div class="container">
    <h1>2345网咖</h1>
    <input type="text" placeholder="用户名" id="username">
    <input type="password" placeholder="密码" id="password">
    <label for="eyeIcon" id="eyeIcon">
        <input type="checkbox" id="eyeCheckbox">
        <span class="closed-eye eye">&#x1F440;</span>
        <span class="open-eye eye" style="display: none">&#x1F441;</span>
    </label>
    <div class="login-button-container">
        <input type="checkbox" id="rememberMe"> <label for="rememberMe">记住我</label>
        <button id="loginButton">登录</button>
        <button id="adminLoginButton">管理员登录</button>
        <div class="error-message" id="errorMessage"></div>
        <div class="loading" id="loading">
            <div class="spinner"></div>
        </div>
    </div>
</div>

<script>
    var passwordInput = document.getElementById("password");
    var eyeCheckbox = document.getElementById("eyeCheckbox");
    var errorMessage = document.getElementById("errorMessage");
    var loginButton = document.getElementById("loginButton");
    var adminLoginButton = document.getElementById("adminLoginButton");
    var loading = document.getElementById("loading");

    eyeCheckbox.addEventListener("change", function () {
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
        } else {
            passwordInput.type = "password";
        }
    });

    function showLoading() {
        loading.style.display = "block";
        loginButton.disabled = true;
        adminLoginButton.disabled = true;
    }

    function hideLoading() {
        loading.style.display = "none";
        loginButton.disabled = false;
        adminLoginButton.disabled = false;
    }

    function login() {
        showLoading();
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        // Form validation
        if (username.trim() === "" || password.trim() === "") {
            errorMessage.textContent = "用户名和密码不能为空";
            hideLoading();
            return;
        }

        // Login logic
        if (username === "User" && password === "123456") {
            errorMessage.textContent = "";
            alert("登录成功");
            window.location.href = "User Center.jsp";
        } else {
            errorMessage.textContent = "用户名或密码有误";
        }
        hideLoading();
    }

    function adminLogin() {
        showLoading();
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        // Form validation
        if (username.trim() === "" || password.trim() === "") {
            errorMessage.textContent = "用户名和密码不能为空";
            hideLoading();
            return;
        }

        // Admin login logic
        if (username === "Manage" && password === "123456") {
            errorMessage.textContent = "";
            alert("管理员登录成功");
            window.location.href = "manage.jsp";
        } else {
            errorMessage.textContent = "用户名或密码有误";
        }
        hideLoading();
    }

    loginButton.addEventListener("click", login);
    adminLoginButton.addEventListener("click", adminLogin);

    // Remember me functionality
    var rememberMeCheckbox = document.getElementById("rememberMe");
    var usernameInput = document.getElementById("username");
    var passwordInput = document.getElementById("password");

    window.onload = function() {
        var savedUsername = localStorage.getItem("username");
        var savedPassword = localStorage.getItem("password");

        if (savedUsername && savedPassword) {
            usernameInput.value = savedUsername;
            passwordInput.value = savedPassword;
            rememberMeCheckbox.checked = true;
        }
    };

    rememberMeCheckbox.addEventListener("change", function() {
        if (rememberMeCheckbox.checked) {
            localStorage.setItem("username", usernameInput.value);
            localStorage.setItem("password", passwordInput.value);
        } else {
            localStorage.removeItem("username");
            localStorage.removeItem("password");
        }
    });
</script>
</body>

</html>
